<template>
	<div class="rootPage">
		<div class="content">
			<image mode="widthFix" src=".../../static/images/scor.gif"></image>
		</div>
		<div class="title"></div>
		<div class="bottom">
			<div v-for="(item, index) in bottomContent" :key="index" class="item">
				<image mode="aspectFit" style="height:30px" :src="item.icon"></image>
				<div>{{ item.title }}</div>
				<div style="color:#999">{{ item.des }}</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'payLoading',
		
		onLoad(event) {
			console.log('-----payLoading-----', event.id)
			setTimeout(() => {
				this.$tab.navigateTo('/pages/loading?id=' + event.id)
			}, 4500)
		},
		data() {
			return {
				bottomContent: [{
						icon: '',
						title: '模块覆盖广',
						des: '对接多家权威机构'
					},
					{
						icon: '',
						title: '信息安全保障',
						des: '信息系统安全等保3级'
					},
					{
						icon: '',
						title: '企业级信息加密',
						des: '保障用户安全'
					}
				]
			}
		},
	}
</script>
<style scoped>
	.rootPage {
		background-color: white;
		overflow: hidden;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-content: center;
		align-items: center;
	}

	.title {
		width: 100%;
		height: 44px;
		line-height: 44px;
	}

	.content {
		width: 100%;
		text-align: center;
		/* height: 376px; */
	}

	.bottom {
		height: 60px;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	.bottom .item {
		height: 100%;
		width: 33.33%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-content: center;
		align-items: center;
		font-size: 11px;
	}
</style>